<template>
	<view>
		<view style="padding:20rpx;">
			<fui-data-tag multiple mark defaultBorderColor="#e0e0e0" :options="UserNoticeLabels"
				:value="MyNoticeLabelIDs" @change="changeNoticeLabels"></fui-data-tag>
		</view>
		<view style="height:auto" v-if="showPingmianLabel">
			<view style="padding:20rpx;color:#FF0000;text-align:left;background-color:#FFFFCC;">
				请选择平面拍摄标签，<br>长按标签1秒钟，可将标签设置为私密(仅VIP会员可见)；<br>蓝色标签为个人主页公开显示的标签；<br>红色标签为私密标签(仅VIP会员可见)。</view>
			<view v-for="(item,index) in pingmianLabels" :key="index">
				<view style="padding:20rpx;">{{ item.LabelName }}：</view>
				<view style="padding:20rpx;">
					<fui-data-tag multiple mark defaultBorderColor="#e0e0e0" height="50" :options="item.subLabel"
						:value="MyPingmianLabelIDs" @change="changePingmianLabels(item.LabelID, $event)"></fui-data-tag>
				</view>
			</view>
		</view>
		<button class="sub-btn" @click="saveNoticeLabels">保存我的接单通告标签</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserNoticeLabels: [],
				SelectNoticeLabels: [],
				MyNoticeLabelIDs: [],
				MyNoticeLabels: [],

				pingmianLabels: [],
				showPingmianLabel: false,
				MyPingmianLabelIDs: []
			};
		},
		onLoad() {
			this.getNoticeLabels();
		},
		methods: {
			getNoticeLabels() {
				this.$httpost('/Labels/UserNoticeLabels', {}).then(res => {
					if (res.code == 200) {
						this.MyNoticeLabelIDs = res.data.MyNoticeLabelIDs
						this.MyNoticeLabels = res.data.MyNoticeLabels
						this.UserNoticeLabels = res.data.UserNoticeLabels
						this.pingmianLabels = res.data.pingmianLabels
						this.MyPingmianLabelIDs = res.data.MyPingmianLabelIDs
						this.showPingmianLabel = this.MyNoticeLabelIDs.includes(165)
					}
				});
			},
			changeNoticeLabels(e) {
				// // console.log('SelectNoticeLabels', e)
				this.SelectNoticeLabels = e.detail.item
				this.MyNoticeLabels = e.detail.value

				this.showPingmianLabel = this.MyNoticeLabels.includes(165)

				this.$httpost('/UserAction/saveMyNoticeLabels', {
					SelectNoticeLabels: this.SelectNoticeLabels,
					MyNoticeLabels: this.MyNoticeLabels
				}).then(res => {
					if (res.code == 200) {}
				});

			},
			changePingmianLabels(LabelID, e) {
				// console.log('SelectPingmianLabels', e)

				this.SelectPingmianLabels = e.detail.item
				this.MyPingmianLabels = e.detail.value

				this.$httpost('/UserAction/saveMyPingmianLabels', {
					changeLabel: LabelID,
					SelectPingmianLabels: this.SelectPingmianLabels,
					MyPingmianLabels: this.MyPingmianLabels
				}).then(res => {
					if (res.code == 200) {

					}
				});
			},

			saveNoticeLabels() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.submitBtn {
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		border: 0rpx solid $globalColor;
		width: 80vw;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto
	}
</style>